<template>
	<div class="paymentBox" v-if="show">
		<div class="bg" @click='hide'></div>
		<div class="payment">
			<div class="title">选择支付方式<span @click="hide">X</span></div>
			<ul>
				<li v-for="(item, index) in options" :key='index' @click='paymentEv(index)' v-if='isShow(index)'>
					<img :src="item.img" alt="" class="leftImg">
					<div class="right">
						<h3>{{item.title}}</h3>
						<p class="text">{{item.txt}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
//该组件接受一个 showList 数组，用来决定显示项 [0,1,2], 如果不传或传空数组，就全部显示
//还接受一个 show false/true ，决定组件是否显示

export default {
	props:{
		showList: Object,
		show: Boolean
	},
	data(){
		return {
			options: [
				{
					title:'天机会余额',
					txt:'可用余额 0.00 元',
					img:'https://wx3.sinaimg.cn/thumb150/b103a6f1ly1fqpvwqhvmoj201t01tdft.jpg'
				},
				{
					title:'微信支付',
					txt:'微信单笔限额20000元',
					img:'https://wx4.sinaimg.cn/thumb150/b103a6f1ly1fqpvwqhw8vj201n01g0sk.jpg'
				},
				{
					title:'支付宝支付',
					txt:'支付宝单笔限额20000元',
					img:'https://wx1.sinaimg.cn/thumb150/b103a6f1ly1fqpvwqj8b4j201h01h3ya.jpg'
				},
			],
		}
	},
	watch:{
		show(){
			this.$emit('input', this.show)
		}
	},
	methods:{
		hide(){
			this.show = false
		},
		isShow(index){
			if( this.showList === undefined || this.showList.toString() === '' ) return true

			for(let i=0; i<this.showList.length; i++){
				if(index === this.showList[i]){
					return true
					break;
				}
			}

		},
		paymentEv(index){
			if(index == 2){
				window.location.href = 'http://zjlist0226.oicp.io:29037/a/pay/MobilePay'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.paymentBox{position: fixed;width:100%;height: 100%;left:0;top:0;text-align:left;
	.bg{width:100%;height: 100%;background-color: rgba(0,0,0,.5);}
	.payment{background-color: white;position: fixed;bottom: 0;left:0;width:100%;height: 400px;overflow-y: auto;
		> .title{text-align: center;font-size: 18px;line-height: 45px;border-bottom:1px solid #e6e6e6;position: relative;
			span{padding:0 20px;position: absolute;left:0;top:0;}
		}
		ul{
			li{overflow: hidden;border-bottom:1px solid #f5f5f5;padding:6px 0;
				.leftImg{width:26px;height:26px;float:left;margin:15px;}
				.right{float: left;margin-top:5px;
					.text{margin-top: 4px;}
				}
			}
		}
	}
}
</style>
